<template>
	<view class="count">
		<view v-if="list.length==0" class="zanwu f f-a-c f-j-c f-d-c">
			<image src="/static/my/fenSi.png" class="myGuan" mode=""></image>
			<view class="tiShi">
				无人问津，还没有人关注我
			</view>
		</view>
		<!-- 列表 -->
		<view class="list">
			<view v-for="(item,index) in list" :key="index" class="listItem f f-a-c f-j-b">
				<view class="lef f f-a-c">
					<image :src="item.avatar" @click="itemGo(item,index)" class="avaImg" mode=""></image>
					<view class="name">
						{{item.nickname}}
					</view>
					<image src="/static/richang/icon@2x.png" v-if="item.gender==2" class="sex" mode=""></image>
					<image src="/static/richang/icon_1@2x.png" v-else class="sex" mode=""></image>
				</view>
				<div v-if="num!=3">
					<view v-if="item.followed" class="rig">
						互相关注
					</view>
					<view v-else @click="guanZhu(item)" class="rigs">
						关注
					</view>
				</div>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				page: 1,
				total: 0,
				num: 0,
				id: 0
			}
		},
		onLoad(options) {
			this.num = options.num
			this.id = options.id
			if (this.num == 3) {
				uni.setNavigationBarTitle({
					title: '他的粉丝'
				})
			}
			this.page = 1
			this.list = []
			this.initList()
		},
		onPullDownRefresh() {
			this.page = 1
			this.list = []
			this.initList()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 500)
		},
		onReachBottom() {
			// console.log('123456789');
			if (this.list.length < this.total) {
				this.page++
				this.initList()
			}
		},
		methods: {
			itemGo(item, index) {
				if (this.num == 3) {
					return
				}
				uni.navigateTo({
					url: '/pages/Meowmate/PersonalHomePage?id=' + item.id
				})
			},
			// 关注用户
			async guanZhu(item) {
				let n = await this.$api.follow({
					id: item.id
				})
				this.$msg(n.msg)
				if (n.code == 200) {
					setTimeout(() => {
						this.page = 1
						this.list = []
						this.initList()
					}, 700)
				}
			},
			async initList() {
				if (this.num != 3) {
					let n = await this.$api.myFans({
						page: this.page
					})
					this.total = n.data.total
					this.list = [...this.list, ...n.data.rows]
				} else {
					let n = await this.$api.fans({
						page: this.page,
						id: this.id
					})
					this.total = n.data.total
					this.list = [...this.list, ...n.data.rows]
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list {
		padding: 30rpx;

		.listItem {
			margin-bottom: 40rpx;

			.rig {
				width: 128rpx;
				height: 56rpx;
				line-height: 55rpx;
				border: 1rpx solid $ebe2da;
				border-radius: 29rpx;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC-400;
				font-weight: 400;
				text-align: CENTER;
				color: $hui;
			}

			.rigs {
				width: 128rpx;
				height: 56rpx;
				line-height: 55rpx;
				border: 1rpx solid $brown;
				border-radius: 29rpx;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC-400;
				font-weight: 400;
				text-align: CENTER;
				color: $brown;
			}

			.lef {
				.avaImg {
					width: 96rpx;
					height: 96rpx;
					border-radius: 48rpx;
					margin-right: 30rpx;
				}

				.name {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-500;
					font-weight: 600;
					text-align: LEFT;
					color: #2f2319;
					margin-right: 15rpx;
					max-width: 300rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.sex {
					width: 24rpx;
					height: 24rpx;
				}
			}
		}
	}

	.zanwu {
		position: fixed;
		top: 30%;
		left: 50%;
		transform: translate(-50%, -50%);

		.myGuan {
			width: 282rpx;
			height: 160rpx;
		}

		.tiShi {
			width: 450rpx;
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC-400;
			font-weight: 400;
			text-align: center;
			color: $hui;
			margin: 30rpx 0;
		}

		.stroll {
			width: 180rpx;
			height: 88rpx;
			line-height: 85rpx;
			background: $brown;
			border-radius: 44rpx;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-500;
			font-weight: 500;
			text-align: center;
			color: $bai;
		}
	}

	.count {
		height: 100vh;
		width: 100%;
		background-color: #fffefc;
	}
</style>